<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="1080" height="630" style="border: 1px solid;"></canvas>
</body>

</html>
<script>

    const ctx = myCanvas.getContext('2d');

    let p1 = [300, 200];
    let p2 = [500, 150];
    let p3 = [360, 50];


    getRotateAng = function ([x1, y1], [x2, y2]) {
        let EPSILON = 1.0e-8;
        let dist, dot, cross, degree, angle;

        dist = Math.sqrt(x1 * x1 + y1 * y1);
        x1 /= dist;
        y1 /= dist;
        dist = Math.sqrt(x2 * x2 + y2 * y2);
        x2 /= dist;
        y2 /= dist;

        dot = x1 * x2 + y1 * y2;
        if (Math.abs(dot - 1.0) <= EPSILON) {
            angle = 0;
        } else if (Math.abs(dot + 1.0) <= EPSILON) {
            angle = Math.PI;
        } else {
            angle = Math.acos(dot);
            cross = x1 * y2 - x2 * y1;
            if (cross < 0) {
                angle = 2 * Math.PI - angle;
            }
        }
        degree = angle * 180 / Math.PI;
        return degree;
    };


    function getLenOfTwoPnts(p1, p2) {
        return Math.sqrt(Math.pow((p1[0] - p2[0]), 2) + Math.pow((p1[1] - p2[1]), 2));
    };

    /**
     * 获取O点到直线PQ的距离
     */
    getLenOfPntToLine = function (O, P, Q) {
        if ((O[0] == P[0] && O[1] == P[1]) || (P[0] == Q[0] && P[1] == Q[1])) {
            return 0;
        }
        let rotateAng = getRotateAng([O[0] - P[0], O[1] - P[1]], [Q[0] - P[0], Q[1] - P[1]]);
        let len = getLenOfTwoPnts(O, P) * Math.sin(rotateAng * Math.PI / 180);
        len = len < 0 ? -len : len;
        return len;
    };

    let len = getLenOfPntToLine(p3, p1, p2);

    ctx.font = "18px serif";
    ctx.lineWidth = 5;
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.strokeStyle = "red";
    ctx.stroke();
    ctx.fillText("向量1", p2[0], p2[1] - 10);

    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.arc(p3[0], p3[1], 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("O点到直线距离:"+len, p3[0], p3[1] - 10);

</script>
<style>
    canvas {
        border: 1px solid #ccc;
        background-image: linear-gradient(90deg,
                #ffffb8 1%,
                rgba(0, 0, 0, 0) 5%),
            linear-gradient(#ffffb8 1%, rgba(0, 0, 0, 0) 5%);
        background-size: 28px 28px;
    }
</style>